解决动态添加路由出现重复路由问题

2024-06-27 04:30| 来源: 网络整理| 查看: 265

highlight: atom-one-dark theme: simplicity-green

在做后台管理项目时，需要根据用户权限动态添加路由，但退出登录账号1，登录账号2时，出现了[vue-router] Duplicate named routes definition这样的警告，如图：在这里插入图片描述

Duplicate named routes definition：重复定义路由

查阅资料，这一篇文章给出了两种解决方案：解决$router.addRoutes()添加路由，出现的路由重复添加问题

方法1：location.reload(),vue上的所有实例在刷新的时候都会被重置方法2：刷新时只重置路由

显然，方法1所有都被重置，比较耗时，对用户不太友好，只重置路由似乎是个更好的选择文章里给出方法2的解决方案是定义一个重置路由的函数，再在退出登录时调用即可

于是，采取方法2开始解决问题因为涉及路由的定义，重置函数应该写在router文件夹下的index.js里

//定义新建路由方法 const createRouter = () => new Router({ mode: "history", routes: routes //传入定义的路由参数 }); //新建路由 const router = createRouter() //重置路由函数 export export function resetRouter() { const newRouter = createRouter(); router.matcher = newRouter.matcher; //替换成新的空路由 } export default router

router.matcher是比较核心的一个属性，修改了matcher即新的routes生效对外提供两个方法match(负责route匹配), addRoutes（动态添加路由）

具体过程：在做路径切换transitionTo方法中，首先就会使用const route = this.router.match(location, this.current)来匹配route, 其实内部会使用matcher来做匹配。修改了matcher即新的routes生效。

match ( raw: RawLocation, current?: Route, redirectedFrom?: Location ): Route { // 这里使用matcher的match方法来做匹配 return this.matcher.match(raw, current, redirectedFrom) }

对router.matcher属性做修改，即新的routes就会替换老的routes, 其实就是replaceRoutes()的含义（但是官方没有提供这个API）。

export type Matcher = { match: (raw: RawLocation, current?: Route, redirectedFrom?: Location) => Route; addRoutes: (routes: Array) => void; };

接下来，就是在退出登录按键下调用这个resetRouter函数退出登录在CommonHeader.vue的下拉菜单里首先在CommonHeader.vue里引入resetRouter函数

import {resetRouter} from '../router/index'

然后在按键绑定的方法里调用即可

handleCommand(command){ if(command === 'logout'){ Cookie.remove('token') Cookie.remove('menu') this.$router.push('/login') resetRouter() //重置路由 } }

再次运行项目就没有警告了，问题解决！

参考资料(vue.js - vue-router工作原理概述和问题分析)

【本文地址】

公司简介

联系我们

解决动态添加路由 出现重复路由问题

解决动态添加路由出现重复路由问题